<script setup lang="ts">
import { request } from '@/api'
import { showToast } from 'vant'
import { ref } from 'vue'

const onClickLeft = () => {
  history.back()
}
const onClickRight = async () => {
  await request.patch('/v1_0/user/profile', {
    name: newNickname.value,
  })
  // 修改成功后返回上一页
  history.back()
}
const newNickname = ref('')
</script>

<template>
  <van-nav-bar title="编辑昵称" @click-left="onClickLeft">
    <!-- 左侧插槽 -->
    <template #left>
      <span class="custom-left-btn">
        <van-icon name="arrow-left" color="#909399" />
      </span>
    </template>

    <!-- 右侧插槽 -->
    <template #right>
      <span class="custom-right-btn" @click="onClickRight"> 提交 </span>
    </template>
  </van-nav-bar>

  <!-- 输入框 -->
  <div class="input-container">
    <input v-model="newNickname" type="text" placeholder="请输入新昵称" class="nickname-input" />
  </div>
</template>

<style scoped>
/* 自定义右侧按钮样式 */
.custom-right-btn {
  color: #fa541c; /* 设置为橙色 */
  font-weight: 600;
  font-size: 12px; /* 可根据需要调整字体大小 */
  cursor: pointer;
}

/* 输入框容器 */
.input-container {
  margin-top: 20px; /* 距离上方一定间距 */
  display: flex;
  justify-content: center; /* 水平居中 */
}

.nickname-input {
  width: calc(100% - 40px); /* 接近全屏，留出20px左右边距 */
  max-width: 600px; /* 最大宽度限制 */
  padding: 10px;
  border: none; /* 去除边框 */
  border-radius: 5px; /* 圆角 */
  font-size: 14px;
  background-color: #f5f5f5; /* 灰色背景 */
  color: #333; /* 字体颜色 */
  box-sizing: border-box;
}

.nickname-input::placeholder {
  color: #aaa; /* 提示词颜色 */
}
</style>
